<script setup lang="ts">
import { ref, useAttrs, watch } from 'vue'
import { CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue'
import { useModalDraggable } from '@/hooks/useModalDraggable'

/*
 父组件必须传递title属性。当与title插槽冲突时，请传递 _title属性
*/

const props = withDefaults(
	defineProps<{
		toggleFull?: boolean
		draggable?: boolean
	}>(),
	{
		toggleFull: false,
		draggable: false,
	}
)

const attrs = useAttrs()

const isFullScreen = ref(false)

if (props.draggable) {
	const { setDraggable, removeDraggable } = useModalDraggable()
	watch(
		() => attrs.visible,
		(v) => {
			//console.log(v,attrs.title)
			if (v && !isFullScreen.value) setDraggable(attrs.title as any)
			else removeDraggable()
		}
	)
	watch(isFullScreen, (v) => {
		//console.log('hhhh')
		if (v) removeDraggable()
		else setDraggable(attrs.title || attrs._title as any)
	})
	
}
const emits=defineEmits(['cancel','ok'])
</script>

<template>
	<a-modal 
	@cancel="emits('cancel')"
	v-if="toggleFull" v-bind="$attrs" 
	class="fullScreenModal" 
	:wrap-class-name="isFullScreen ? 'screen-full-modal-wrap' : ''">
		<slot></slot>

		<template #closeIcon>
			<div class="close-icon" style="display: flex; align-items: center; justify-content: space-between">
				<div style="margin-right: 26px" @click.stop="isFullScreen = !isFullScreen">
					<fullscreen-outlined v-show="!isFullScreen" />
					<fullscreen-exit-outlined v-show="isFullScreen" />
				</div>
				<div style="margin-right: 20px">
					<close-outlined />
				</div>
			</div>
		</template>

		<template #title>
			<slot name="title"></slot>
		</template>

		<template #footer>
			<slot name="footer">
				<div style="display: flex;justify-content: flex-end;align-items: center;">
                    <a-button @click="emits('cancel')">取消</a-button>
                    <a-button type="primary" @click="emits('ok')">确认</a-button>
				</div>
			</slot>
		</template>
	</a-modal>

	<a-modal @cancel="emits('cancel')" v-bind="$attrs" v-else>
		<slot></slot>
		<template #title>
			<slot name="title"></slot>
		</template>

		<template #footer>
			<slot name="footer">
				<div style="display: flex;justify-content: flex-end;align-items: center;">
                    <a-button @click="emits('cancel')">取消</a-button>
                    <a-button type="primary" @click="emits('ok')">确认</a-button>
				</div>
			</slot>
		</template>
	</a-modal>
</template>

<style lang="less">
.fullScreenModal {
	.ant-modal-close-x {
		width: 100px;
	}
}

.screen-full-modal-wrap {
	.ant-modal {
		max-width: 100%;
		right: 0;
		top: 0 !important;
		bottom: 0;
		left: 0 !important;
		padding-bottom: 0;
		margin: 0;
		width: 100% !important;
	}

	.ant-modal-content {
		display: flex;
		flex-direction: column;
		height: calc(100vh);
	}
	.ant-modal-body {
		flex: 1;
		max-height: unset !important;
	}
	.ant-modal-footer{
	  position: absolute;
      bottom: 0;
	  left: 0;
	  right: 0;
	}
}
</style>
